<!doctype html>
<!--
TODO:
add create/delete/?duplicate
add javascript advanced query
more efficient check for server file changed ~ eg do not always refresh after Update.
allow user formatting of form in similar way to proto
Opera width, uses scrollbar
multiple view options
editing direct on view

-->
<html>
<head>
	<title>Address book</title>
	<style type="text/css" title="currentStyle">

body, table { width: 100%; }	
  
#message {
  color: red;
  font-weight:bold;
}

#dmessage {
  color: blue;
}

#result {
  column-count: 4;
  column-width: 22%;
  -webkit-column-count: 4;
  -webkit-column-width: 22%;
  -moz-column-count: 4;
  -moz-column-width: 22%;
  }

.entry {
  display: block;  
  margin-bottom: 1.8em;
  break-inside: avoid;
  column-break-inside: avoid;
  -webkit-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-break-inside: avoid;
  -moz-column-break-inside: avoid;
  }
  
.currentClicked {
  color:red;
}  

# rules below are to colorcode any display of the log
# the 'xxxother' and 'xxxlost' rules are for a private experiment
.opins, .opdel, .opupins, .opupdel {
  color: purple;
}
.opinsother, .opdelother, .opupinsother, .opupdelother {
  color: red;
}
.opinslost, .opdellost, .opupinslost, .opupdellost {
  color: green;
}

.opdel, .opdelother, .opdellost {
	text-decoration: line-through;
}
.opupdel, .opupdelother, .opupdellost {
	text-decoration: overline;
}
.opupins, .opupinsother, .opupinslost {
	text-decoration:underline;
}

/* html class can be a..Z 0..9  - _ : . ---> but . and : won't work with css */

	</style>
</head>

<body>
	<p><b>Todd's Address book vvv17</b>: browser <span id="browser"></span></p>

	<p>Enter  query:
	<input type="text" id="search" name="search" size="50%" onkeyup="dbsubmit()" />
	<input type="submit" onclick="dbsubmit()" value="Submit" />
	
	<span id="refresh" style="display:none;">
		Refresh rate:
		<!-- http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input ; TODO: bad for curor keys in Chrome -->
		<input type="text" id="refreshrate" name="refreshrate" size="10em" value="5000" 
		   onkeyup="this.value=this.value.replace(/[^\d]/,''); refreshrateChange();">
	</span>
	hits=<span id="hits"></span>.
    <input type="submit" onclick="showhideProto()" value="Show/hide prototype" style="float:right"/>
	</p>
	
	<p id="message">
	</p>

	<p id="dmessage" style="display:none;">
	</p>
	
	<hr>

	<!--
	'proto' holds the skeleton format, which is html with $placeholders$ for fields.
	'result' will be substituted with one span group for each matching line of data.
	Each line of proto will be treated separately.
	Any line with a substitution but where all substitutions are blank will be ignored.
	For example, in the below, if an entry has no mobile number, the entire "<br>mob: <b>$mobile$</b>" line will not be used.
	Note that lines must be split by //.  Using a 'real' line end failed on IE8.
	-->
	<table id="dataarea" width="100%">
		<tr>
			<td width="66%" valign="top" align="left">
    				<div id="proto" valign="top" onkeyup="newproto()" contenteditable="true" style="display:none;">
				//<span class="op$opern$">
					//<b>$last name$</b>, $first name$ <i>$children$</i>
					//<br>$address$
					//<br>$town$
					//<br>$county$
					//<br>$country$
					//<br>$postcode$
					//<br>tel: <b>$Tel/Fax$</b>
					//<br>mob: <b>$mobile$</b>
					//<br><i>$comments$</i>
					//</span>
				</div>
				<div id="result" valign="top" >
                result will be placed here ...
				</div>
			</td>
			<td width="20%" valign="top" align="right">
				<div style="border-style: solid; border-width:1px; border-color:#d0d0d0;">		
					<input type="submit" onclick="insert()" value="Insert" id="insertk" />
					<input type="submit" onclick="update()" value="Update" id="updatek"/>
					<input type="submit" onclick="dodelete()" value="Delete" id="deletek" />
					<input type="submit" onclick="doclear()" value="Clear" id="cleark"/>
					<input type="submit" onclick="cleandb()" value="Clean DB" />

					<div id="form">
					</div>
				</div>			
			</td>
		</tr>
	</table>
	
</body>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
  <script type="text/javascript" src="minidb.js?vvv17=1">  </script>

</html>

